<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>错误单词选择</title>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
</head>
<body>
<div id="app">
    <!-- 顶部导航栏 -->
    <el-menu mode="horizontal">
        <el-menu-item @click="navigateHome">首页</el-menu-item>
        <el-menu-item index="errorTest" disabled>错误单词测试</el-menu-item>
    </el-menu>

    <div style="padding: 20px;">
        <h3>选择错误章节进行测试</h3>
        <!-- 错误章节选择组件 -->
        <el-cascader
                :options="chapterOptions"
                placeholder="请选择章节"
                v-model="selectedChapter"
                @change="onChapterChange">
        </el-cascader>

        <el-button type="primary" @click="startErrorTest" :disabled="!selectedChapter" style="margin-top: 20px;">开始测试</el-button>
    </div>
</div>

<!-- 引入 Vue 和 ElementUI -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            chapterOptions: [],  // 存储错误章节的选项
            selectedChapter: null  // 用户选择的章节
        },
        created() {
            // 页面加载时获取错误章节
            this.loadErrorChapters();
        },
        methods: {
            navigateHome() {
                window.location.href = '../index.html';
            },
            // 获取错误章节的分组数据
            loadErrorChapters() {
                axios.get('/error-chapters')
                    .then(response => {
                        const data = response.data.data;
                        // 将数据转换为 Element UI Cascader 组件支持的格式
                        this.chapterOptions = Object.keys(data).map(topChapter => ({
                            value: topChapter,
                            label: `第${topChapter}章`,
                            children: Array.from(data[topChapter]).map(subChapter => ({
                                value: subChapter,
                                label: subChapter
                            }))
                        }));
                    })
                    .catch(error => console.error('获取错误章节失败:', error));
            },
            onChapterChange(value) {
                this.selectedChapter = value;
            },
            startErrorTest() {
                if (this.selectedChapter) {
                    // 选中的章节的最后一个子章节
                    const chapter = this.selectedChapter[this.selectedChapter.length - 1];
                    window.location.href = `test.html?chapter=${encodeURIComponent(chapter)}&errorTest=true`;
                }
            }
        }
    });
</script>

</body>
</html>